<template>
	<view>
		<u-toast ref="commonMsg" />
		<div class="bottom">
			<div>
				<image @click="doLock" class="myImage" :src="lockImg"></image>
				<span class="mytext">{{locking==true?"已锁定":"已解锁"}}</span>
			</div>
			<div>
				<image class="myImage" :src="temperatureImg"></image>
				<span class="mytext">温度：</br>{{temperature}} ℃</span>
			</div>
			<div>
				<image class="myImage" :src="humidityImg"></image>
				<span class="mytext">湿度：</br>{{humidity}} %RH</span>
			</div>
		</div>
		<div class="bottom">
			<div>
				<image class="myImage" :src="stateImg"></image>
				<span class="mytext">状态：</br>{{stateMsg}}</span>
			</div>
			<div>
				<div class="btn">
					<u-button :type="btnColor" @click="transport" size="mini">{{transportMsg}}</u-button>
				</div>
			</div>
			<div>
				<image class="myImage" :src="warnImg"></image>
				<span class="mytext">警告代码：</br>{{warn}}</span>
			</div>
		</div>
		<div class="jw">
			<div class="">
				<div class="center-image">
					<image class="myImage" src="/static/position.png"></image>
				</div>
			</div>
			<div class="" style="padding-left: 0px;">
				<div class="mytext">经 度: {{pointPosition.lng.toFixed(6)}}</div>
				<div class="mytext">纬 度: {{pointPosition.lat.toFixed(6)}}</div>
				<div class="mytext">地 点: {{currentAddress}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		name: "Common",
		created() {

			let deviceId;
			try {
				deviceId = uni.getStorageSync('deviceId');
			} catch (e) {
				// error
				console.log(e.message);
			}

			//从服务器中拿温湿度，状态，警告信息
			uni.request({
				url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
				data: {
					deviceId: deviceId
				},
				success: (res) => {
					// console.log(res.data);

				}
			});

		},
		// props: ["currentAddress","pointPosition"],
		data() {
			return {
				locking: true, //锁定
				lockImg: "/static/lock.png", //锁图片
				temperature: 0, //温度
				temperatureImg: "/static/temperature-medium.png", //温度图片位置
				humidity: 0, //湿度
				humidityImg: "/static/Humidity-normal.png", //湿度图片位置
				state: 1,
				warn: 0,
				warnMsg: "暂无",

			};
		},
		computed: {
			btnColor() {
				if (this.state == 1) return "primary";
				if (this.state == 2) return "error";
				if (this.state == 3) return "success";
			},
			transportMsg() {
				if (this.state == 1) return "开始运输";
				if (this.state == 2) return "结束运输";
				if (this.state == 3) return "设为空闲";
			},
			//警告图片
			warnImg() {
				return "/static/warnig.png"
			},

			//状态信息
			stateMsg() {
				if (this.state == 1) {
					return "空闲";
				} else if (this.state == 2) {
					return "运输中";
				} else if (this.state == 3) {
					return "已完成";
				} else {
					return "空闲"
				}
			},
			//状态图片
			stateImg() {
				if (this.state == 1) { //空闲
					return "/static/state-idle.png";
				} else if (this.state == 2) { //运输中
					return "/static/state-transport.png";
				} else if (this.state == 3) { //运输完成
					return "/static/state-complete.png";
				} else {
					return "/static/state-idle.png";
				}
			},
			pointPosition() {
				return this.$store.state.myPosition;
			},
			currentAddress() {
				return this.$store.state.myAddress;
			}
		},
		watch: {
			locking(newLocking) {
				// 当 locking 变化时触发
				this.lockImg = newLocking ? "/static/lock.png" : "/static/unlock.png";
				// this.state += 1;
				// if (this.state > 3) this.state = 1
			},
		},
		methods: {
			doLock() {
				console.log("doLock")
				this.locking = !this.locking;
				let deviceId;
				try {
					deviceId = uni.getStorageSync('deviceId');
				} catch (e) {
					// error
					console.log(e.message);
				}
				if (this.locking) { //锁定
					//发起请求
					uni.request({ //结束运输
						url: `${this.$store.state.ipAddr}/state`, //仅为示例，并非真实接口地址。
						data: {
							deviceId: parseInt(deviceId, 10), //设备号
							state: 1
						},
						success: (res) => {
							// console.log()
							this.$refs.commonMsg.show({
								title: '已锁定',
								type: 'success',
							})
						}

					})
				} else { //解锁
					//发起请求
					uni.request({ //结束运输
						url: `${this.$store.state.ipAddr}/state`, //仅为示例，并非真实接口地址。
						data: {
							deviceId: parseInt(deviceId, 10), //设备号
							state: 0
						},
						success: (res) => {
							// console.log()
							this.$refs.commonMsg.show({
								title: '已解锁',
								type: 'success',
							})
						}
					})
				}
			},
			transport() {
				// state: 1, //状态 0-空闲，1-运输中，2-运输完成
				// 触发父组件传递的方法				
				let deviceId;
				try {
					deviceId = uni.getStorageSync('deviceId');
				} catch (e) {
					// error
					console.log(e.message);
				}
				// console.log("状态 1-空闲，2-运输中，3-运输完成")
				if (this.state != 3) {
					if (this.state == 1) { //空闲->运输中
						//发起请求
						uni.request({ //结束运输
							url: `${this.$store.state.ipAddr}/status`, //仅为示例，并非真实接口地址。
							data: {
								deviceId: parseInt(deviceId, 10), //设备号
								status: 2
							},
							success: (res) => {
								// console.log()
								this.$refs.commonMsg.show({
									title: '正在监听运输信息',
									type: 'success',
								})
							}
						})


						this.$emit('getInfoFromServer');
					} else if (this.state == 2) { //运输中->运输完成
						// 发送请求,结束运输
						uni.request({ //结束运输
							url: `${this.$store.state.ipAddr}/status`, //仅为示例，并非真实接口地址。
							data: {
								deviceId: parseInt(deviceId, 10), //设备号
								status: 3
							},
							success: (res) => {
								// console.log()
								this.$refs.commonMsg.show({
									title: '已结束运输',
									type: 'success',
								})
							}
						})
					}
					this.state++;
				} else {
					//运输完成->空闲
					// 发送请求,设为空闲
					
					this.$refs.commonMsg.show({
						title: '小车当前空闲',
						type: 'success',
					})
					uni.request({ //设为空闲
						url: `${this.$store.state.ipAddr}/status`, //仅为示例，并非真实接口地址。
						data: {
							deviceId: parseInt(deviceId, 10), //设备号
							status: 1
						},
						success: (res) => {
							// console.log()
							this.$refs.commonMsg.show({
								title: '小车当前空闲',
								type: 'success',
							})
						}
					})
					this.state = 1
				}


			}
		},

	}
</script>

<style scoped>
	.bottom {
		margin-top: 30rpx;
		margin-bottom: rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
		/* 可以根据需要调整对齐方式 */
	}

	.bottom>div {
		display: flex;
		align-items: center;
		/* 垂直居中，可以根据需要调整 */
	}


	.mid {
		margin-top: 30rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.mid>div {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.jw {
		display: flex;
		margin-top: 30rpx;
		margin-left: 20rpx;

	}

	.left-column {
		flex: 1;
		max-width: 33%;
		/* 占用 1/3 的总宽 */
	}

	.center-image {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	.right-column {
		flex: 2;
		/* 剩下的宽度分为两份 */
	}

	.myImage {
		height: 100rpx;
		width: 100rpx;
		position: relative;
	}

	.mytext {
		margin-right: 20rpx;
		font-weight: 300;
		font-family: Arial, sans-serif;
	}
</style>